<head>
  <style> body { margin: 0; } </style>

  <script src="//bundle.run/@yarnpkg/lockfile@1.1.0"></script>

  <script src="//unpkg.com/3d-force-graph"></script>
  <!--<script src="../../dist/3d-force-graph.js"></script>-->
</head>

<body>
<div id="graph"></div>

<script type="module">
  import SpriteText from 'https://esm.sh/three-spritetext';
  import { forceCollide } from 'https://esm.sh/d3-force-3d';
  import { GUI } from 'https://esm.sh/dat.gui';

  // controls
  const controls = { 'DAG Orientation': 'lr'};
  const gui = new GUI();
  gui.add(controls, 'DAG Orientation', ['lr', 'td', 'zout', 'radialout', null])
    .onChange(orientation => graph && graph.dagMode(orientation));

  // graph config
  const graph = new ForceGraph3D(document.getElementById('graph'))
    .backgroundColor('#101020')
    .linkColor(() => 'rgba(255, 255, 255, 0.6)')
    .dagMode('lr')
    .onDagError(() => false)
    .dagLevelDistance(180)
    .nodeId('package')
    .linkCurvature(0.07)
    .nodeThreeObject(node => {
      const sprite = new SpriteText(node.package);
      sprite.material.depthWrite = false;
      sprite.color = 'lightsteelblue';
      sprite.textHeight = 8;
      return sprite;
    })
    .d3Force('collide', forceCollide(13))
    .d3AlphaDecay(0.02)
    .d3VelocityDecay(0.3);

  fetch('../../yarn.lock')
    .then(r => r.text())
    .then(text => {
      const yarnlock = _yarnpkg_lockfile.parse(text);
      if (yarnlock.type !== 'success') throw new Error('invalid yarn.lock');
      return yarnlock.object;
    })
    .then(yarnlock => {
      const nodes = [];
      const links = [];

      Object.entries(yarnlock).forEach(([pkg, details]) => {
        nodes.push({
          package: pkg,
          version: details.version
        });

        if (details.dependencies) {
          Object.entries(details.dependencies).forEach(([dep, version]) => {
            links.push({source: pkg, target: `${dep}@${version}`});
          });
        }
      });

      graph.graphData({ nodes, links });
    });
</script>
</body>
